// React的生命周期
// 生命周期：很多事物都有自己的生命周期，从创建到销毁的过程称为生命周期；
// React也有自己的生命周期，了解React的生命周期，才可以让你在 最合适的地方完成想做的功能
// 生命周期是个抽象的概念，分为多个阶段
// 例如装载过程(Mount) 组件第一次渲染DOM树的过程
// 例如更新过程(Update) 组件状态(state)发生变化，重新更新渲染的过程
// 例如卸载过程(Unmount) 组件从DOM树移除中被移除的过程

// React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现某些函数回调，这些函数回调就是生命周期函数(钩子)
// 例如实现componentDidMount函数 ：组件已经挂载到DOM树上时就会回调
// 例如实现componentDidUpdate函数 ： 组件已经发生了更新时，就会回调
// 例如实现componentWillUnmount函数 ： 组件将要从DOM树移除前，就会回调
// 我们可以在这些回调函数中编写自己的逻辑代码，来实现自己的需求功能

// 生命周期执行顺序：((常用)) 生命周期图： https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
// 1. 挂载的整个过程(Mounting) (先执行)把组件实例化执行构造函数constructor(class组件-> new 关键字进行实例化) -> render函数 -> 更新完DOM和refs 执行生命周期回调 compoentDidMount
// 2.更新过程(Updating) 当状态发生变化时(New props, setState, forceUpdate),会重新执行render函数 -> 更新完DOM和refs -> 调用生命周期回调 compoentDidUpdate
// 3.卸载过程(Unmounting) 执行生命周期回调 componentWillUnmount

// 不常用的生命周期回调
// 1. shouldComponentUpdate() 在React重新执行render函数前执行，返回布尔值， true-> 执行render函数 false -> 不执行render函数
// 2. getSnapshotBeforeUpdate() 在React更新DOM之前的一个回调函数，可以获取DOM更新前的一些信息(比如滚动位置); 

import React from 'react'
class HelloWorld extends React.Component {
  constructor() {
    super()
    this.state = {
      message : 'Hello World!'
    }
    // 1.组件实例化后执行constructor
    console.log('HelloWorld 1.constructor');
  }
  render() {
    const {message} = this.state
    // 2.执行render函数,
    console.log('HelloWorld 2.render');
    return <div>
      <h1>{ message}</h1>
      <button onClick={e=> this.setState({message: '你好啊,世界!'})}>更新过程</button>
    </div>
  }
  // 3.React更新完DOM和refs 执行生命周期回调
  componentDidMount() {
    console.log('HelloWorld 3.componentDidMount');
  }
  // 4.状态发生变化时 (new Props, setState, forceUpdate) 重新执行render函数 -> 更新完DOM和refs
  // 调用生命周期回调 compoentDidUpdate
  componentDidUpdate(prevProps,prevState,snapshot) {
    console.log('你好啊,李银河! 重新执行render函数,更新DOM和refs后,调用componentDidUpdate',snapshot)
  }
  // 5.组件将要从DOM树卸载
  componentWillUnmount() {
    console.log('HelloWorld componentWillUnmount');
  }

  // 不常用的生命周期回调
  // -组件应该更新？ 返回值Boolean， true-> 会重新执行render函数 false -> 不会执行render函数
  // 场景：性能优化
  shouldComponentUpdate() {
    return true
  }
  // 在React更新DOM之前的一个回调函数，可以获取DOM更新前的一些信息(比如滚动位置); 
  // 在 componentDidUpdate(prevProps, prevState, snapshot) 之前,在这个回调的形参第三个位置拿到
  getSnapshotBeforeUpdate() {
    return {scrollPosition: 1000}
  }
}

export default HelloWorld // 在类组件中引入过该生命周期组件